<template>
  <div>
    <div class="item_title">安全运转情况</div>
    <el-row style="padding: 10px 16px 6px 10px; text-align: center;height: 314px;">
      <el-col
        :span="12"
        class="middle_item"
        v-for="(item, index) in SafeOperationData"
        :key="index"
      >
        <div class="m_item_title">{{ item.statusname }}</div>
        <div class="m_item_body">
          <div class="m_item_icon">
            <i class="el-icon-s-tools"></i>
          </div>
          <div class="m_item_content">
            <div class="m_i_content_font">
              <span class="fl">正常</span>
              <span class="fr">
                <span style="color: #07e207">{{ item.normal }}</span>
                个 {{ item.normal | proportion(item.abnormal, "ok") }}%</span
              >
            </div>
            <div class="m_i_content_font">
              <span class="fl">异常</span>
              <span class="fr">
                <span style="color: red">{{ item.abnormal }}</span>
                个 {{ item.normal | proportion(item.abnormal, "no") }}%</span
              >
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
export default {
  data() {
    return {
      SafeOperationData: [
   
      ],
    };
  },
  mounted() {
    this.getSafeOperationData()
  },
  methods: {
    getSafeOperationData(){
      ajax.get({
        url: this.$API.getDevMonitorState,
        data: {},
        success: (response) => {
          let self = this
         self.SafeOperationData=response.data
        },
      });
    }
  },
  filters: {
    proportion(normal, unusual, type) {
      let total = normal + unusual;
      if (type == "ok") {
        return ((normal / total) * 100).toFixed(1);
      } else {
        return ((unusual / total) * 100).toFixed(1);
      }
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.item_title {
  height: 50px;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(72, 143, 255, 0.2784313725490196);
}
.m_i_content_font {
  overflow: hidden;
  padding: 5px;
}
.middle_item {
  margin-bottom: 16px;
  border-bottom: 1px solid #488fff47;
}
.middle_item:nth-last-of-type(-n + 2) {
  border-bottom: 0;
  margin-bottom: 0;
}
.m_item_title {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 18px;
}
.m_item_body {
  display: flex;
}
.m_item_icon {
  display: inline-block;
  line-height: 60px;
  width: 15%;
}
.m_item_content {
  display: inline-block;
  width: 78%;
}
</style>